import React from 'react';
import { Layout, Dropdown, Avatar } from 'antd';
import { UserOutlined } from '@ant-design/icons';

const { Header } = Layout;

const AppHeader = ({ isAdmin }) => {
    const items = [
        {
            key: '1',
            label: '个人中心',
        },
        {
            key: '2',
            label: '退出系统',
        },
    ];

    return (
        <Header style={{
            background: '#fff',
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            padding: '0 24px',
            boxShadow: '0 1px 4px rgba(0,21,41,.08)'
        }}>
            <div style={{ fontWeight: 'bold', fontSize: '18px' }}>
                {isAdmin ? '宾馆管理系统 - 管理员' : '宾馆系统 - 客户'}
            </div>

            <Dropdown menu={{ items }} placement="bottomRight">
                <div style={{ cursor: 'pointer', display: 'flex', alignItems: 'center' }}>
                    <Avatar icon={<UserOutlined />} />
                    <span style={{ marginLeft: 8 }}>{isAdmin ? '管理员' : '客户'}</span>
                </div>
            </Dropdown>
        </Header>
    );
};

export default AppHeader;